<template>
  <div class="feedback-list">
    <!-- <div class="feedback-li feedback-status">
      <span v-html="feedbackStatus"></span>
    </div> -->
    <span v-if="feedbackItem.isSubmit === 2" class="iconfont icon-yiqianshou-wuliuxiangqing"></span>
    <van-row
      class="feedback-li"
      :class="'feedback-li' + index"
      v-for="(item, index) in visiblefeedIbackTitles"
      :key="index">
      <van-col v-show="index !== 0" span="6" class="label">{{ item.title }}：</van-col>
      <van-col :span="index !== 0 ? 18 : 24" class="value">
        <van-icon v-show="index === 0" name="column" />
        <template v-if="item.field === 'feedBackFile'">
          <ImgUpload v-if="feedbackItem[item.field].length > 0" :albumList="feedbackItem[item.field]" :entry="false" />
        </template>
        <template v-else>
          {{ feedbackItem[item.field] }}
        </template>
        <template v-if="pageBtns.includes('TASK_FEEDBACK_Y') || pageBtns.includes('TASK_FEEDBACK_N')">
          <div class="btn-box" v-if="index === 0 && feedbackItem.isSubmit === 1 && feedbackItem.isReturnBack === 0">
            <van-button type="primary" color="#167add" size="small" @click="handleFeedback(1)">通 过</van-button>
            <van-button type="warning" color="#d81e06" size="small" @click="handleFeedback(0)">退 回</van-button>
          </div>
        </template>
      </van-col>
    </van-row>
  </div>
</template>
<script>
/*
  展示反馈结果的组件
*/
import ImgUpload from '@com/ImgUpload'
export default {
  name: 'FeecbackItem',
  components: {
    ImgUpload,
  },
  props: {
    /* 反馈数据item */
    feedbackItem: {
      type: Object,
      default: () => {},
    },
    /* 反馈字段 */
    feedIbackTitles: {
      type: Array,
      default: () => [],
    },
    /* 页面权限按钮 */
    pageBtns: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {}
  },
  computed: {
    visiblefeedIbackTitles() {
      return this.feedIbackTitles.filter(item => item.visible)
    },
    // 状态
    feedbackStatus() {
      let text = ''
      const { isSubmit = '', isReturnBack = '' } = this.feedbackItem
      if (isSubmit === 0 || isReturnBack === 1) {
        text = '<span style="color:#d81e06">未提交</span>'
      } else if (isSubmit === 1 && isReturnBack === 0) {
        text = '<span style="color:#07c160">已提交</span>'
      } else if (isSubmit === 1 && isReturnBack === 1) {
        text = '<span style="color:#ff976a">已退回</span>'
      } else if (isSubmit === 2) {
        text = '<span style="color:#1989fa">已签收</span>'
      }
      // console.log(this.feedbackItem)
      return text
    },
  },
  watch: {},
  created() {},
  mounted() {
    // console.log(this.feedIbackTitles)
  },
  methods: {
    handleFeedback(type) {
      this.$emit('handleFeedback', {
        feedbackItem: this.feedbackItem,
        type: type,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.feedback-list {
  background: #fff;
  // margin-bottom: px2rem(30);
  position: relative;
  .feedback-li {
    &.feedback-li0 {
      font-weight: 600;
      color: #333;
      .value {
        display: flex;
        align-items: center;
        .btn-box {
          position: absolute;
          right: px2rem(10);
          .van-button {
            margin-left: px2rem(30);
          }
        }
      }
    }
    &:not(:last-child) {
      border-bottom: 1px solid #f5f6f7;
    }
    display: flex;
    padding: px2rem(20);
    color: #606266;
    font-size: $fontSize30;
    /deep/.van-col {
      word-break: break-all;
    }
    /deep/.van-icon {
      font-size: px2rem(34);
      color: #167add;
      margin-right: px2rem(10);
    }
    /* .label {
    }*/
    /* .value {
      text-align: right;
    } */
    &.feedback-status {
      justify-content: flex-end;
      .van-tag {
        padding: 0 4px;
      }
    }
  }
  .iconfont {
    position: absolute;
    color: #d81e06;
    font-size: px2rem(100);
    right: px2rem(10);
    top: px2rem(10);
    z-index: 10;
  }
  .up_box {
    padding: 0;
  }
}
</style>
